<!--
 * @Author: '浪川' '1214391613@qq.com'
 * @Date: 2025-08-06 16:06:08
 * @LastEditors: '浪川' '1214391613@qq.com'
 * @LastEditTime: 2025-08-09 10:46:30
 * @FilePath: \passiflora-edulis-sims\src\components\CreateBook\BookTitleSettingComponent.vue
 * @Description: 标题和副标题的设置
 * 
 * Copyright (c) 2025 by '1214391613@qq.com', All Rights Reserved. 
-->
<script setup lang="ts">
import { useGeneralPuzzleStore } from 'src/stores/CreateBook/general-puzzle-store'
import { useGlobalOptionStore } from 'src/stores/global-option-store'

const general_puzzle_store = useGeneralPuzzleStore()
const globale_option_store = useGlobalOptionStore()
</script>
<template>
  <div>
    <!-- 主标题 -->
    <div class="row">
      <div class="col-8 q-pb-sm q-pr-sm">
        <q-input
          outlined
          v-model="general_puzzle_store.title.text"
          label="标题"
          :input-style="{
            color: general_puzzle_store.title.font.font_color,
          }"
        >
          <template v-slot:append>
            <q-icon name="colorize" class="cursor-pointer">
              <q-popup-proxy
                cover
                transition-show="scale"
                transition-hide="scale"
              >
                <q-color v-model="general_puzzle_store.title.font.font_color" />
              </q-popup-proxy>
            </q-icon> </template
        ></q-input>
      </div>
      <div class="col-4 q-pb-sm q-pr-sm">
        <q-input
          outlined
          v-model.number="general_puzzle_store.title.font.font_size"
          label="标题尺寸"
          type="number"
        />
      </div>

      <div class="col-8 q-pb-sm q-pr-sm">
        <q-input
          outlined
          v-model="general_puzzle_store.instruction.text"
          label="副标题"
          :input-style="{
            color: general_puzzle_store.instruction.font.font_color,
          }"
        >
          <template v-slot:append>
            <q-icon name="colorize" class="cursor-pointer">
              <q-popup-proxy
                cover
                transition-show="scale"
                transition-hide="scale"
              >
                <q-color
                  v-model="general_puzzle_store.instruction.font.font_color"
                />
              </q-popup-proxy>
            </q-icon>
          </template>
        </q-input>
      </div>
      <div class="col-4 q-pb-sm q-pr-sm">
        <q-input
          outlined
          v-model.number="general_puzzle_store.instruction.font.font_size"
          label="副标题尺寸"
          type="number"
        />
      </div>
      <div class="col-6 q-pr-sm">
        <q-select
          outlined
          v-model="general_puzzle_store.title.font.font_name"
          :options="globale_option_store.font_names"
          label="主标题字体"
        >
        </q-select>
      </div>
      <div class="col-6 q-pr-sm">
        <q-select
          outlined
          v-model="general_puzzle_store.instruction.font.font_name"
          :options="globale_option_store.font_names"
          label="副标题字体"
        >
        </q-select>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
